<template>
  <div class="titleborder" :style="{padding: getscalepxc(5)}">
    <div class="titlespan" :style="titleStyle">
      <span :style="mainTitleStyle">&nbsp;&nbsp;{{ borderOptions.bordertitle }}</span>
      <span :style="unitStyle">{{ borderOptions.borderunit }}</span>
    </div>
    <div class="titlecontent" :style="titleContentStyle">
      <slot />
    </div>
  </div>
</template>

<script>
import defaultmixins from "@/mixins/bigScreen/defaultmixins";

import commonmixins from "@/mixins/bigScreen/commonmixins";

//四个角框title

export default {
  name: "commonborder1",
  mixins: [defaultmixins,commonmixins],
  props: ["title"],
  data() {
    return {
      backUrl: require("@/assets/linglong/bg_chanliangyuchanpindanhao.png")
    };
  },
  computed: {
    titleStyle() {
      return {
        // ...this.borderOptions.titleSpan,
        backgroundImage: `url(${this.backUrl})`,
        height: 72 * this.$root.setting.scale + "px",
        lineHeight: 72 * this.$root.setting.scale + "px",
        marginLeft: 20 * this.$root.setting.scale + "px",
        // padding: this.getscalepxc(5)

      };
    },
    titleContentStyle() {
      const height = 72 * this.$root.setting.scale;
      return {
        ...this.borderOptions.titleContent,
        height: `calc(100% - ${height}px)`
      };
    },
    unitStyle() {
      return {
        color: "#4FC7FF",
        fontSize: 24 * this.$root.setting.scale
      };
    },
    mainTitleStyle() {
      return {
        color: 'white',
        fontSize: 38 * this.$root.setting.scale + "px"
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.titleborder {
  height: 100%;
  width: 100%;
  background-color: #042037dd;
}

.titlespan {
  // border: 1px dashed #fffdef;
  width: fit-content;
  background-size: 100% 100%;
  text-align: center;
}
.titlecontent {
}
.lbdiv {
}
</style>
